<template>
  <div>
    <div>
      <router-link tag="div" to="/">跳转ref</router-link>
      <router-link tag="div" to="/reactive">跳转reactive</router-link>
      <router-link tag="div" to="/to">跳转to</router-link>
      <router-link tag="div" to="/computed">跳转computed</router-link>
      <router-link tag="div" to="/watch">跳转watch</router-link>
      <router-link tag="div" to="/watchEffect">跳转watchEffect</router-link>
      <router-link tag="div" to="/lifeCycle">跳转生命周期</router-link>
      <router-link tag="div" to="/zujianchuanzhi">跳转组件传值</router-link>
      <router-link tag="div" to="/zujian">跳转组件类型</router-link>
      <router-link tag="div" to="/activeZujian">跳转动态组件</router-link>
      <router-link tag="div" to="/chacao">跳转插槽</router-link>
      <router-link tag="div" to="/await"
        >异步组件&代码分包&suspense</router-link
      >
      <router-link tag="div" to="/teleport">Teleport</router-link>
      <router-link tag="div" to="/keepAlive">keepAlive</router-link>
      <router-link tag="div" to="/transition">transition</router-link>
      <router-link tag="div" to="/transition-group"
        >transition-group</router-link
      >
      <router-link tag="div" to="/transition-group2"
        >transition-group2</router-link
      >
      <router-link tag="div" to="/provide-inject">provide-inject</router-link>
      <router-link tag="div" to="/bus">兄弟组件传参</router-link>
      <router-link tag="div" to="/Tsx">Tsx</router-link>
      <router-link tag="div" to="/model">v-model</router-link>
      <router-link tag="div" to="/directive">自定义指令</router-link>
      <router-link tag="div" to="/Hooks">Hooks</router-link>
      <router-link tag="div" to="/css">css</router-link>
      <router-link tag="div" to="/pinia">pinia</router-link>
      <router-link tag="div" to="/routerIndex">routerIndex</router-link>

      <!--  加了replace 属性就不会存在历史记录 相当于router.replace  -->
      <router-link replace tag="div" to="/">不带历史记录的 Ref</router-link>
      <router-link replace tag="div" to="/reactive"
        >不带历史记录的 reactive</router-link
      >

      <!--  路由的 go()   back()  跳转方法-->
    </div>

    <hr />
    <router-view #default="{ route, Component }">
      <transition
        :enter-active-class="`animate__animated ${route.meta.transition}`"
      >
        <component :is="Component"></component>
      </transition>
    </router-view>
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import "animate.css"
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.blue {
  color: blue;
}
* {
  margin: 10px;
}
.border {
  border: 1px solid #ccc;
}
</style>